<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/axios/dist/axios.min.js"></script>
    <script src="js/vue3.js"></script>
    <!--
    element-plus ui组件(饿了么 ui组件)
    -->
    <link rel="stylesheet" href="js/index.css">
    <script src="js/index.full.js"></script>
    <script src="js/index.iife.min.js"></script>
    <script src="js/zh-cn.js"></script>

</head>
<body>
    <div id="app">
        
                 <el-table :data="tableData">
            <el-table-column width="50" fixed="left" type="selection"></el-table-column>
            <el-table-column width="80" label="ID"  prop="employee_id"></el-table-column>
            <el-table-column width="180" label="姓名" prop="employee_name" ></el-table-column>
            <el-table-column width="180" label="工资"  prop="employee_salary"></el-table-column>
            <el-table-column width="180" label="部门编号"  prop="department_id"></el-table-column>
            
         </el-table>
         <el-pagination :total="total" background
             layout="total,prev,pager,next,jumper"
             :page-size="limit" :current-page.sync="page"
             @current-change="jump"
        >
         </el-pagination>
         
    </div>
    <script>
        const app = {
            data(){
                return{
                    tableData:null,  //表格的数据
                    total:0, //总记录数
                    page:1,
                    limit:6,
                    showAddDialog:false,
                    ruleForm: {
                        employee_name: '',
                        employee_salary: ''
                    },
                   

                }
            },
            methods:{
                jump(val){
                    this.page = val;
                    this.initData();
                },
                initData(){
                    const self = this;
                    axios.get("http://localhost:88/users01?page=" + this.page + "&limit=" + this.limit)
                    .then(res=>{
                        self.tableData = res.data.list; //用户的集合数据
                        self.total = res.data.total;  //总记录数
                    })
                }
            },
            mounted(){
                this.initData();

            }
        }
        const vueApp = Vue.createApp(app); //创建vue的对象实例对象
        vueApp.use(ElementPlus, {locale: ElementPlusLocaleZhCn}); //引用elementplus,组件
          //加载icons 图标图形组件
          for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
               vueApp.component(key, component);
          }
          vueApp.mount("#app");//挂载到某个html标签
    </script>
</body>
</html>